<template>
  <el-form
    ref="formRef"
    :model="model"
    label-position="left"
    :rules="rules"
  >

    <el-form-item
      prop="user_id"
      label="司机"
      :label-width="labelWidth"
    >
      <template v-if="!model.id">
        <el-select
          v-model="model.user_id"
          placeholder="请选择"
          filterable
          remote
          :disabled="!!model.id"
        >
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
      </template>

      <template v-else>
        <el-input
          v-model="model.username"
          :disabled="true"
          style="width: 203.4px;"
        />
      </template>

    </el-form-item>

    <el-form-item
      prop="driver_license_type"
      label="驾照等级"
      :label-width="labelWidth"
    >
      <el-select v-model="model.driver_license_type" placeholder="请选择">
        <el-option
          v-for="item in drivingClass"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

  </el-form>
</template>
<script>
import { drivingClass } from '../../js/enum'
import { getAllUser } from '@/api/v2/personnel'
import { getNotSetDriverUsers } from '@/api/vehicleService'
export default {
  name: '',
  props: {
    model: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      labelWidth: '100px',
      rules: {
        user_id: [{ required: true, message: '请选择司机', trigger: ['change', 'blur'] }],
        driver_license_type: [{ required: true, message: '驾照类型不能为空', trigger: ['change', 'blur'] }]
      },
      drivingClass,
      userList: []
    }
  },
  created() {
    this.getUserList()
  },
  methods: {

    async getUserList() {
      try {
        const res = await getNotSetDriverUsers()
        this.userList = res.data
      } catch (error) {
        throw new Error('Failed to get user list')
      }
    },

    resetFields() {
      this.$refs.formRef.resetFields()
    },

    validate() {
      return new Promise(resolve => {
        this.$refs.formRef.validate(flag => {
          console.log('flag --------->', flag)
          resolve(flag)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
